<template>
  <div class="container">
    <my-head></my-head>
    <img class="head-img" src="../assets/img/b1.jpg" alt="">
    <nav class="dhdt">
      <p :class="[dnumber==index ?'active':'']"   v-for="(item,index) in navfont" :key="index" @click="xufl(index)"><span>{{item.font}}</span></p>
    </nav>
    <ul class="con-nr">
      <li class="jzx1 animate__animated animate__fadeInUp"   v-show="dnumber==0"    >
        <div>
<!--          <h2>设计团队</h2>-->
          <p>TUOYE的设计团队，针对不同地域环境，不同客户群体及需求，在项目定位的基础上，进行总体规划上的设计，使其功能、风格符合项目定位及市场需要。从概念方案阶段、方案设计阶段(含方案深化设计)、初步设计阶段，施工图设计阶段、实施阶段等全面落地设计服务。</p>
        </div>
      </li>
      <li class="jzx1 animate__animated animate__fadeInUp"   v-show="dnumber==1"    >
        <div>
<!--          <h2>技术团队</h2>-->
          <p>TUOYE拥有自己的生产车间，自动化生产设备、精湛的技术力量，可满足不同客户，不同集装箱模块产品定制的生产需要；从外观结构、保温、基层、饰面、吊顶、地面、水电管线预埋、开关插座、照明系统、卫浴系统、空调设备，到门窗安装等，全部在工厂预置完成，实现一体化生产作业模式，具备更高效完成客户订单的生产能力。</p>

        </div>
      </li>
      <li class="jzx1 animate__animated animate__fadeInUp"   v-show="dnumber==2"    >
        <div>
<!--          <h2>安装团队</h2>-->
          <p>
            TUOYE安装团队，平均年出行安装任务达6200m²，具备丰富的现场吊装、安装经验，能够根据不同的地域环境，制定不同的吊装、安装方案，精准高效，省时省心，从实际出发，为客户赢得提前运营的时间。
          </p>

        </div>
      </li>

    </ul>
    <my-foot></my-foot>
  </div>
</template>

<script>
export default {
  data(){
    return{
      move:0,
      dnumber:0,
      navfont:[
        {font:"设计团队"},
        {font:"技术团队"},
        {font:"安装团队"},

      ],
      navfont2:[
        {font:"时尚、优雅、健康的智能生态旅居新方式"},
        {font:"科技引领+服务创新"},
        {font:"励志打造成世界一流的集装箱房企业"},
        {font:"为荣誉而战"},

      ],
    }
  },
  methods: {
    xufl(e) {
      this.dnumber = e
    },

  }
}
</script>

<style scoped lang="less">

.head-img{
  width: 100%;
  height: auto;
}
.dhdt{
  margin:  0 auto;
  display: flex;
  justify-content: center;align-items: center;
  height: 88px;
  width: 1200px;
  overflow: hidden;

  p{
    margin: 0 50px;
    font-size: 16px;
    text-align: center;
    padding-bottom: 5px;
    border-bottom: 2px solid #FFFFFF;
  }
  .active{
    transition:all 0.3s ease-in;
    border-bottom: 2px solid crimson;
  }
  P:hover{
    transition:all 0.3s ease-in;
    border-bottom: 2px solid crimson;
  }
}
.con-nr{
  background: #F4F4F8;
  overflow: hidden;
  width: 100%;
  li{
    div{
      width: 1200px;
      height: 500px;
      margin: 20px auto;
      padding: 75px;
      box-sizing: border-box;
      background: #fff;
      h2{
        color: #222222;
        font-weight: bold;
        text-align: center;
        font-size: 24px;
        margin: 50px 0;
      }
      p{
        margin-top: 10px;
        font-size: 16px;
        line-height: 30px;

      }
    }
  }
}
</style>
